<template>
  <NowLoading v-if="firstLoading"/>
    <div  v-else class="question-detail">
      <van-nav-bar
    title="问题详情"
    left-arrow
    @click-left="$router.back()"
  />
  <div class="product" @click="$router.push({path:'/micircle',query:{id:question.product_id}})">
    <van-image
    class="personl-img"
    width="2rem"
    height="2rem"
    :src="question?.product_img_url"
  />
  <span class="product-name">{{ question?.product_name }}</span>
  </div>
  <div class="content">
  <p>{{ question?.question }}</p>
  <div class="avatar">
  <div class="avatar-detail">
    <van-image
    round
    class="personl-img"
    width="1.75rem"
    height="1.75rem"
    :src="question?.avatar"
  />
  <div class="name">
    <div>{{ question?.nickname }}</div>
    <div class="create-time">提问于{{ question?.create_time }}</div>
  </div>
  </div>
  <div class="attention"  @click="getFollow">
  <span v-if="!isFollow"> 问题关注</span>
  <span v-else>已关注</span>
</div>
  
  </div>
  </div>  
  <div class="answer-list">
    <div class="answer-top">
      <div class="answer-num">共{{ question?.answer_num }}讨论</div>
      <div class="tab">
        <span :class="{active:isActive===1}" @click="changeTab(1)">热门</span>
        <span :class="{active:isActive===0}" @click="changeTab(0)">最新</span>
      </div>
    </div>
  
    <div class="answer-list-content">
      <van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  :immediate-check="false"
>
      <div class="answer-list-item" v-for="item in anList" :key="item.answer_id">
   <div class="answer-img">
    <van-image
    round
    width="1.75rem"
    height="1.75rem"
    :src="item.avatar"
  />
   </div>
  
  <div class="answer-right">
    <div class="answer">
      <div>
      <span  class="nickname">{{ item.nickname }}</span>
      <span>{{ item.create_time }}</span>
    </div>
      <div >
        <span class="support-num">{{ item.support_num }}</span>
        <van-icon name="good-job-o" size="1.1rem"/>
      </div>
  </div>
    <p class="answer-content">{{ item.answer_content }}</p>
    
     <div class="secondary-data" v-if="item.secondary_data?.answer_list?.length">
      <div class="secondary-data-item" v-for="i in item.secondary_data.answer_list" :key="i.answer_id">
  <p>
    <span class="se-nickname">{{  i.nickname}}:</span><span class="se-answer-content">{{ i.answer_content }}</span>
  </p>
      <p class="se-belong-place" v-if="i.belong_place">{{ i.belong_place }}</p>
      </div>
     </div>
  </div>
      </div>
    </van-list>
    </div>








  </div>
  <div class="join-discuss">
    <van-search left-icon="comment-circle-o"  class="discuss" 
    @search="onSearch" 
     v-model="disValue" placeholder="一起讨论吧~" />

  
    <van-icon name="share-o" size="1.35rem" color="#7a7a7a"/>
  
    <div class="praise-num"><van-icon name="good-job-o" size="1.35rem" color="#7a7a7a"/>{{question?.praise_num  }}</div>
    <!-- <CardCtrl :answer_num="question.answer_num" :praise_num="question.praise_num" :my_up="question" :id="question.product_id"/> -->
  </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import NowLoading from '../../../../components/NowLoading.vue'
  import CardCtrl from '../../../../components/CardCtrl.vue'
  import { onMounted,ref,reactive ,nextTick,onBeforeUnmount} from 'vue'
  import { getQuestionDetail,getQuestionAnswerList } from '../../../../api/find'
  import { type questionDetail, answerItem } from '../../../../typings';
  import { useRoute } from 'vue-router';
  import { findStore } from '../../../../stores/findStore/find'
  import { storeToRefs } from 'pinia';
  const route = useRoute();
  const disValue = ref<string>('');
  const question = ref<questionDetail>();
  const anList = ref<Array<answerItem>>([])
  const isActive = ref(1);
  const after = ref(0);   
  const loading = ref(false);  // 评论下拉
  const finished = ref(false);   
  const firstLoading = ref(true);   // 页面第一次加载
  let r = Number(route.query.id);
  let isFollow = ref(false);
  const followQuestionStore = findStore();
const { myQuestionList } = storeToRefs(followQuestionStore);
  onMounted(() => {

      getData(r);
      getAnserListData(after.value, isActive.value);
      getLoading();


  }
  )
   const getData = async(r:number)=> {
    let res = await getQuestionDetail(r);
       question.value = res.data;
       isFollow.value = myQuestionList.value.some((item) => {
      return item.product_id === question.value.product_id;
       });
     
  }
  const getAnserListData = async(a:number,h:number)=> {
      let list = await getQuestionAnswerList(r, a, h);
      anList.value = [...anList.value, ...list.data.answer_list];

  }
  const changeTabAnserListData = async(a:number,h:number)=> {
      let list = await getQuestionAnswerList(r, a, h);
      anList.value = list.data.answer_list;
  }
  const getLoading = () => {
    setTimeout(() => {
      firstLoading.value = false;
    }, 1000);
  }
  const changeTab = (hot:number) => {
    isActive.value = hot;
    changeTabAnserListData(0, hot);
  
  }
  const onSearch = () => {
    let obj = {
        nickname: '我',
        create_time: new Date().getHours() + ' : '+ new Date().getMinutes()+' : '+new Date().getSeconds(),
        answer_content: disValue.value,
        avatar:'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    }
    anList.value.unshift(obj);
    disValue.value = '';

      
    
  }
  const onLoad = () => {
      setTimeout(() => {
     getAnserListData(after.value,isActive.value);
     nextTick(() => {
      loading.value = false;
      after.value += 1;
        })
        if (anList.value.length >= 1000) {
          finished.value = true;
        }
      }, 1000);
};

  const getFollow = () => {
    isFollow.value = !isFollow.value;
  if (isFollow.value) {
       myQuestionList.value = myQuestionList.value.filter((item) => {
        return item.product_id !== question.value.product_id;
      });
      myQuestionList.value = [...myQuestionList.value, question.value];
      localStorage.setItem('myQuestionList', JSON.stringify(myQuestionList.value));
    } else {
      myQuestionList.value = myQuestionList.value.filter((item) => {
        return item.product_id !== question.value.product_id;
      });
      localStorage.setItem('myQuestionList', JSON.stringify(myQuestionList.value));
  }
}

    onBeforeUnmount (()=>{
      onLoad();
      getLoading();
    }
)
  </script>
  <style lang="scss" scoped>
  .question-detail {
    position: fixed;
    width: 100vw;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #f5f5f5;
    overflow: scroll;
    z-index: 99999;
  }
   :deep(.van-nav-bar) {
    width: 100vw;
    background-color: #f2f2f2;
   }
  :deep(.van-nav-bar__title) {
      color: #666666;
      font-weight: normal;
  }
  
  :deep(.van-nav-bar__arrow) {
      color: #919191;
      font-size: 1.5rem;
  }
  .product {
    margin-bottom: .6rem;
    padding: 0rem 1rem;
    height: 3rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    .product-name{
      font-size: .8rem;
      margin-left: .6rem;
    }
  }
  p {
    margin: 0;
  }
  .content {
    padding: 1rem 1rem;
    background-color: #fff;
    .avatar{
     display: flex;
     justify-content: space-between;
     .avatar-detail {
      margin-top: .9rem;
      display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: .8rem;
     }
     .avatar-detail .name {
      margin-left: .8rem;
     }
     .avatar-detail .name .create-time {
      color: #b9b9bf;
      font-size: .65rem;
      // color: #ff5934;
     }
     .attention {
      display: block;
      margin-top: 1rem;
      font-size: .75rem;
      color: #ff5934;
      padding: .4rem;
      border-radius: 99999rem;
      background: rgba(255,89,52,.07);
     }
  }
  }
  .join-discuss {
    position: fixed;
    bottom: 0;
    padding: .3rem 1rem;
    height: 3.2rem;
    width: 100vw;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  .discuss{
    width: 60vw;
     height: 2rem;
    background-color: #f6f6f6;
    border-radius: 9999rem;
    display: flex;
    align-items: center;
    padding: .3rem .5rem;
  }
  .praise-num{
      color: #7a7a7a;
      font-size: .85rem;
    }
  }
  .answer-list {
    margin-top: .5rem;
    background-color: #fff;
  
    .answer-top {
      padding: 0rem 1rem;
      font-size: .8rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eaeaea;
    .answer-num {
      color: rgba(0,0,0,.5);
    }
    .tab {
      padding: .2rem .3rem;
      border-radius: 9999rem;
      background-color: #f6f6f6;
      span {
        padding: .2rem .45rem;
        border-radius: 9999rem;
      }
      span.active {
        background-color: #fff;
        color: #ff5934;
      }
    }
  }
  }
  .answer-list-item{
    display: flex;
    padding: .8rem 1rem;
    
    .answer-img {
      margin-right: 1rem;
  
    }
    .answer-right{
      width: 100%;
      border-bottom:.05rem solid rgba(0,0,0,.1);
      .answer {
        display: flex;
      justify-content: space-between;
      color: rgba(0,0,0,.5);
      font-size: .8rem;
      .nickname {
        margin-right: 1rem;
      }
      .support-num {
        color: #333;
        margin-right: .2rem;
      }
      }
      .answer-content {
        font-size: .85rem;
        margin: .2rem 0rem .6rem;
      }
   
     
    }
  }
  
  .secondary-data {
        padding: .5rem .5rem 0rem;
        font-size: .8rem;
        background-color: #fafafa;
        border-radius: .3rem;
        .se-nickname,
        .se-belong-place {
          color: rgba(0,0,0,.5);
        }
        p {
          padding-bottom: .6rem;
        }
      }
      .title {
        color: #333;
        padding-top: .98rem;
        font-size: 1.3rem;
        font-weight: bold;
      }
      // vw
  </style>